<template>
  <view class="main-pd u-p-t-28 u-p-b-80">
    <view class="u-flex">
      <view class="color-333 font-28">请填写电子业主卡信息：</view>
    </view>
    <view class="u-card u-m-t-20">
      <view class="font-32 color-333">
        <view class="list-item">
          <view class="u-flex u-flex-between">
            <view class="u-flex">
              <text class="color-f34b47">*</text>
              <text>卡类型</text>
            </view>
            <view>
              <u-radio-group v-model="cardType" placement="row">
                <u-radio
                  :customStyle="{ marginRight: '16rpx' }"
                  v-for="item in cardList"
                  :key="id"
                  :label="item.name"
                  :name="item.id"
                  activeColor="#f34b47">
                </u-radio>
              </u-radio-group>
            </view>
          </view>
        </view>
        <view class="list-item" v-if="cardType == 1">
          <view class="u-flex u-flex-between u-flex-items-center">
            <view class="u-flex">
              <text class="color-f34b47">*</text>
              <text class="w-160">身份证号</text>
            </view>
            <view>
              <u-input
                @blur="searchMsg(yzMsg.idcard)"
                placeholder="请输入身份证查询信息"
                v-model="yzMsg.idcard"
                inputAlign="right"
                border="none"></u-input>
            </view>
          </view>
        </view>
        <view class="list-item" v-if="cardType == 0">
          <view class="u-flex u-flex-between u-flex-items-center">
            <view class="u-flex">
              <text class="color-f34b47">*</text>
              <text class="w-160">联系方式</text>
            </view>
            <view>
              <u-input
                @blur="searchMsg(yzMsg.phone)"
                placeholder="请输入手机号查询信息"
                v-model="yzMsg.phone"
                inputAlign="right"
                border="none"></u-input>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-radio-group v-model="xqId" placement="column">
      <view v-for="(item, index) in xqList" :key="item" class="u-flex">
        <u-radio
          :customStyle="{ marginBottom: '8px' }"
          activeColor="#f34b47"
          label=""
          :name="item.id">
        </u-radio>
        <view class="u-card u-m-t-20 u-flex-grow">
          <view class="font-32 color-333">
            <view class="list-item">
              <view class="u-flex u-flex-between">
                <view>所属小区</view>
                <view>{{ item.deptName || "" }}</view>
              </view>
            </view>
            <view class="list-item">
              <view class="u-flex u-flex-between">
                <view>单元位置</view>
                <view
                  >{{ item.louNumber || "" }}楼{{ item.dyNumber || "" }}单元{{
                    item.fjNumber || ""
                  }}号</view
                >
              </view>
            </view>
            <view class="list-item">
              <view class="u-flex u-flex-between">
                <view>姓名</view>
                <view>{{ item.name || "" }}</view>
              </view>
            </view>
            <view class="list-item">
              <view class="u-flex u-flex-between">
                <view>性别</view>
                <view>{{ item.sex }}</view>
              </view>
            </view>
            <view class="list-item">
              <view class="u-flex u-flex-between">
                <view>联系方式</view>
                <view>{{ item.tel || "" }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-radio-group>
    <view class="u-m-t-20">
      <u-button
        text="保存信息"
        color="linear-gradient(90deg, #FA827D 0%, #F34B47 100%)"
        :customStyle="{
          fontSize: '36rpx',
          height: '96rpx',
        }"
        @click="addYzmsg"></u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getFcInfoApi, adddzkApi } from "@/api/index";
import useInfoStore from "@/store/user";
const userStore = useInfoStore();
let cardType = ref(1);
let cardList = ref([
  {
    name: "主卡",
    id: 1,
  },
  {
    name: "副卡",
    id: 0,
  },
]);

let yzMsg = reactive({
  name: "",
  idcard: "",
  phone: "",
});
// 查询的小区信息
let xqList = ref([]);
let xqId = ref("");
// 利用手机号身份证搜索信息
const searchMsg = (val) => {
  if (!val) {
    uni.$u.toast("查询信息不能为空，请正确输入！");
    xqList.value = [];
    return false;
  }
  getFcInfoApi({
    zkfk: cardType.value,
    searchInfo: val,
  }).then((res) => {
    if (res.success) {
      xqList.value = res.data;
    } else {
      uni.$u.toast(res.msg);
    }
  });
};
// 添加业主信息
const addYzmsg = () => {
  if (!xqId.value) {
    uni.$u.toast("请查询后选择小区信息！");
    return false;
  }
  adddzkApi(
    {
      id: xqId.value,
      isZk: cardType.value,
      openId: userStore.openId,
    },
    { contentType: "application/json" }
  ).then((res) => {
    if (res.success) {
      uni.$u.toast("添加成功");
      uni.navigateBack();
    } else {
      uni.$u.toast(res.msg);
    }
  });
};
</script>

<style lang="scss" scoped>
.normal-cell {
  ::v-deep.u-radio-group {
    justify-content: flex-end;
  }
}
</style>
